<script setup lang="ts">
  import { computed, ref, watch } from 'vue'

  const props = defineProps<{
    type?: 'primary' | 'success' | 'warning' | 'error' | 'info'
    height?: number
    paddingLr?: number
    color?: string
    width?: number
    showOverText?: string
  }>()

  /**
   * 状态类型
   */
  const statusType = ref<'primary' | 'success' | 'warning' | 'error' | 'info'>('primary')

  /**
   * 状态容器的样式
   */
  const hStatusStyle = computed(() => {
    const width = props.width ? `${props.width}px` : 'min-content'
    let result = `height: ${props.height || 24}px; padding: 0px ${
      props.paddingLr || 8
    }px; width: ${width}`
    props.color && (result += `color: ${props.color};`)
    return result
  })

  /**
   * 是否禁用文字提示
   */
  const isDisableTooltip = ref(true)

  // 内容div
  const contentRef = ref<HTMLDivElement | null>(null)

  /**
   * 状态容器鼠标移入事件
   */
  const handleMouseover = () => {
    if (contentRef.value) {
      isDisableTooltip.value = !(props.width && contentRef.value.scrollWidth > props.width)
    }
  }

  /**
   * 状态容器鼠标移出事件
   */
  const handleMouseleave = () => {
    isDisableTooltip.value = true
  }

  watch(
    props,
    (value) => {
      if (['primary', 'success', 'warning', 'error', 'info'].includes(value.type)) {
        statusType.value = value.type
      }
    },
    { immediate: true },
  )
</script>

<template>
  <div>
    <el-tooltip effect="dark" :disabled="isDisableTooltip" :content="props.showOverText">
      <div
        :class="['h_status', statusType]"
        :style="hStatusStyle"
        @mouseover="handleMouseover"
        @mouseleave="handleMouseleave"
      >
        <div class="other" v-if="$slots.prefix">
          <slot name="prefix"></slot>
        </div>
        <div class="content" ref="contentRef">
          <slot></slot>
        </div>
      </div>
    </el-tooltip>
  </div>
</template>

<style scoped lang="scss">
  .h_status {
    border: 1px solid #f2f6fc;
    cursor: default;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    gap: 8px;

    .content {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .primary {
    color: $primaryColor;
  }

  .success {
    color: $secondColor3;
  }

  .warning {
    color: $secondColor2;
  }

  .error {
    color: $deleteColor;
  }

  .info {
    color: #909399;
  }
</style>
